<template>
    <div class="remoteSharePassword">
        <div class="banner">
            <label class="field">
                <div class="name">
                    门锁管理员密码：
                </div>
                <input class="password" type="text" name="password" pattern="\d{6,8}" maxlength="8" v-model="password"/>
            </label>
            <div class="field" @click="show1">
                <div class="name">
                    截止日期：
                    <span class="date-time-input">{{ data1 }}</span>
                    <div class="date-time-item">
                        <date-time ref="dateTime1"
                                   format="yyyy-MM-dd hh:mm:00"
                                   type="dateTime"
                                   @confirm="select1"></date-time>
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="name">
                    有效时段1：
                </div>
                <h5 class="left date-time-input"  @click="show21">{{ data21 }}</h5>
                <date-time ref="dateTime21"
                           format="hh:mm:00"
                           type="time"
                           @confirm="select21"></date-time>
                <div> - </div>
                <h5 class="right date-time-input" @click="show22">{{ data22 }}</h5>
                <date-time ref="dateTime22"
                           format="hh:mm:00"
                           type="time"
                           @confirm="select22"></date-time>
            </div>
            <div class="field">
                <div class="name">
                    有效时段2：
                </div>
                <h5 class="left date-time-input"  @click="show31">{{ data31 }}</h5>
                <date-time ref="dateTime31"
                           format="hh:mm:00"
                           type="time"
                           @confirm="select31"></date-time>
                <div> - </div>
                <h5 class="right date-time-input" @click="show32">{{ data32 }}</h5>
                <date-time ref="dateTime32"
                           format="hh:mm:00"
                           type="time"
                           @confirm="select32"></date-time>
            </div>
            <label class="field">
                <div class="name">
                    是否多次有效(默认单次)：
                </div>
                <van-switch v-model="checked" />
            </label>

        </div>
        <div class="buttonList">
            <div class="flex" v-for="(item,index) in items">
                <div class="flexItem" @click="produce">{{item.name}}</div>
            </div>
        </div>
        <van-popup v-model="show" ><van-loading color="#1989fa" /></van-popup>
    </div>
</template>

<script>
    import moment from 'moment';
    import DateTime from 'vue-date-time-m';
    import { Toast,Loading,Popup,Switch,Field  } from 'vant';
    import {TenonWebsocket} from "../../js/websocket";
    import md5 from 'blueimp-md5'
    import {parse} from "../../js/parseData";

    export default {
        name: 'RemoteSharePassword',
        components: {
            DateTime,
            vanLoading: Loading,
            vanPopup: Popup,
            vanSwitch: Switch,
            vanField: Field
        },
        data () {
            return {
                gatewayId : this.$route.query.gatewayId,
                devId : this.$route.query.devId,
                show:false,
                hexStrTemp:'',
                generateSharePassword:'',
                password: '',
                data1: moment().format('YYYY-MM-DD hh:mm:ss'),
                data21: '00:00:00',
                data22: '00:00:00',
                data31: '00:00:00',
                data32: '00:00:00',
                checked: false,
                items: [{name: '生成临时密码'}],
            }
        },
        created () {

        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            //  展示日期组件
            show1 () {
                this.$refs.dateTime1.show()
            },
            show21 () {
                this.$refs.dateTime21.show()
            },
            show22 () {
                this.$refs.dateTime22.show()
            },
            show31 () {
                this.$refs.dateTime31.show()
            },
            show32 () {
                this.$refs.dateTime32.show()
            },
            // 日期组件回调
            select1 (val) {
                this.data1 = val
            },
            select21 (val) {
                this.data21 = val
            },
            select22 (val) {
                this.data22 = val
            },
            select31 (val) {
                this.data31 = val
            },
            select32 (val) {
                this.data32 = val
            },
            produce: function (){
                //校验
                if(this.password != null && /^\d{6,8}$/.test(this.password)){
                }else{
                    Toast('密码必填且是6到8位数字！')
                    return
                }

                if(this.data1 != null && this.data1 != ''){
                }else{
                    Toast('有效截止时间异常！')
                    return
                }

                if(this.data21 != null && this.data21 != ''){
                    if(this.data22 != null && this.data22 != '') {
                    }else{
                        Toast('有效时段1结束时间异常！')
                        return
                    }
                }else{

                }

                if(this.data31 != null && this.data31 != ''){
                    if(this.data32 != null && this.data32 != '') {
                    }else{
                        Toast('有效时段2结束时间异常！')
                        return
                    }
                }

                //有效截止时间
                let moment1 = moment(this.data1, "YYYY-MM-DD hh:mm:ss")
                let moment1_year = (Array(4).join(0) + Number.parseInt(moment1.get('year')).toString(16)).slice(-4)
                let moment1_month = (Array(2).join(0) + Number.parseInt(moment1.get('month')+1).toString(16)).slice(-2)
                let moment1_date = (Array(2).join(0) + Number.parseInt(moment1.get('date')).toString(16)).slice(-2)
                let moment1_hour = (Array(2).join(0) + Number.parseInt(moment1.get('hour')).toString(16)).slice(-2)
                let moment1_minute = (Array(2).join(0) + Number.parseInt(moment1.get('minute')).toString(16)).slice(-2)
                let moment1_second = (Array(2).join(0) + Number.parseInt(moment1.get('second')).toString(16)).slice(-2)

                //有效时段1
                let moment21 = moment(this.data21, "hh:mm:ss")
                let moment21_hour = (Array(2).join(0) + Number.parseInt(moment21.get('hour')).toString(16)).slice(-2)
                let moment21_minute = (Array(2).join(0) + Number.parseInt(moment21.get('minute')).toString(16)).slice(-2)
                let moment21_second = (Array(2).join(0) + Number.parseInt(moment21.get('second')).toString(16)).slice(-2)

                let moment22 = moment(this.data22, "hh:mm:ss")
                let moment22_hour = (Array(2).join(0) + Number.parseInt(moment22.get('hour')).toString(16)).slice(-2)
                let moment22_minute = (Array(2).join(0) + Number.parseInt(moment22.get('minute')).toString(16)).slice(-2)
                let moment22_second = (Array(2).join(0) + Number.parseInt(moment22.get('second')).toString(16)).slice(-2)

                //有效时段2
                let moment31 = moment(this.data31, "hh:mm:ss")
                let moment31_hour = (Array(2).join(0) + Number.parseInt(moment31.get('hour')).toString(16)).slice(-2)
                let moment31_minute = (Array(2).join(0) + Number.parseInt(moment31.get('minute')).toString(16)).slice(-2)
                let moment31_second = (Array(2).join(0) + Number.parseInt(moment31.get('second')).toString(16)).slice(-2)

                let moment32 = moment(this.data32, "hh:mm:ss")
                let moment32_hour = (Array(2).join(0) + Number.parseInt(moment32.get('hour')).toString(16)).slice(-2)
                let moment32_minute = (Array(2).join(0) + Number.parseInt(moment32.get('minute')).toString(16)).slice(-2)
                let moment32_second = (Array(2).join(0) + Number.parseInt(moment32.get('second')).toString(16)).slice(-2)

                //随机数
                let random = this.getRandom16Byte()

                //管理员密码，ascii对照转为16进制
                let password = '' ;
                this.password.split('').map((item)=>{
                    password = password + (Array(2).join(0) + item.charCodeAt().toString(16)).slice(-2)
                })

                //是否多次有效
                let moreValidate = this.checked ? '00' : '01'
                //发送到设备的16进制数据
                this.hexStrTemp = moment1_year + moment1_month + moment1_date + moment1_hour + moment1_minute + moment1_second +
                    moment21_hour + moment21_minute + moment21_second + moment22_hour + moment22_minute + moment22_second +
                    moment31_hour + moment31_minute + moment31_second + moment32_hour + moment32_minute + moment32_second +
                    moreValidate + random

                //拼上密码进行md5加密
                let passwordTemp =
                    md5(this.hexStrTemp + password)

                //取摘要的前26bit,并转成10进制,不够0的补足0
                this.generateSharePassword = (
                    Array(8).join(0) + Number.parseInt(parse(passwordTemp).binaryString.slice(-26),2)
                ).slice(-8)

                //1、显示绑定中
                this.show = true;
                let _this = this;


                //2、定义发送指定命令的回调函数
                TenonWebsocket.msgHandlerCallbackMap.set('CmdFromDev'+'cmdFromDev',function(data){
                    //toast1.clear()
                    _this.show = false;
                    _this.$router.push({
                        path: '/generateSharePassword',
                        query: {
                            generateSharePassword: _this.generateSharePassword,
                            enter:'remoteSharePassword',
                        }
                    });//其中login是你定义的一个路由模块
                })

                //3、绑定网关时发送消息让网关处于等待状态
                TenonWebsocket.sendData(JSON.stringify({
                    "Cmd":"CmdToDev",
                    "SubCmd":"cmdToDev",
                    "GatewayId": _this.gatewayId,
                    "DevId": _this.devId,
                    "Data": _this.hexStrTemp
                }))
            },
            getRandom: function (min,max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            getRandom16Byte: function () {
                let list = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
                let data = '';
                for(let i=0;i<32;i++){
                    let randomNo = this.getRandom(0,15)
                    data = data + list[randomNo]
                }
                return data;
            }
        }
    }
</script>

<style scoped>
    .remoteSharePassword > .van-popup{
        background-color: rgba(0,0,0,0);
    }
    .remoteSharePassword > .banner {
        background: url(../../assets/remoteSharePassword_01.png) no-repeat center top;
        background-size: 100% 100%;
        width: 100vw;
        height: 88.88vw;
        float: left;
        display: flex; /*Flex布局*/
        flex-direction: column; /*Flex主轴方向为从上到下，交叉轴从左到右*/
        justify-content: center;
        align-items: center;
    }

    .remoteSharePassword > .banner > .field {
        background: url(../../assets/remoteSharePassword_02.png) no-repeat center top;
        background-size: 100% auto;
        width: 90vw;
        height: 15%;
        margin: 10px 0;
        display: flex; /*Flex布局*/
        align-items: center;
        color: rgba(120, 120, 120, 1);
    }

    .remoteSharePassword > .banner > .field > .name {
        margin-left: 5vw;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .remoteSharePassword > .banner > .field  > .left {
        line-height: 300%;
        width: 30%;
        height: 100%;
    }
    .remoteSharePassword > .banner > .field  > .right {
        line-height: 300%;
        width: 30%;
        height: 100%;
    }

    /*密码输入框*/
    .remoteSharePassword > .banner > .field > .password {
        outline: 0;
        -web-kit-appearance: none;
        -moz-appearance: none;
        color: rgba(120, 120, 120, 1);
        width: 30%;
        height: 50%;
        border-radius: 15px;
    }

    /**临时密码生成按钮*/
    .remoteSharePassword > .buttonList {
        height: calc(100vh - 88.88vw);
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .remoteSharePassword > .buttonList > .flex {
        width: 100vw;
        height: 8vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;
    }

    .remoteSharePassword > .buttonList > .flex > .flexItem {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        background-size: 100% 100%;
        color: #fff;
        align-self: center;
    }
</style>
